<template>
	<view class="chest_box">
		<view class="chest_box_item" v-for="index in 12" :key="index" @click="change(index)">
			<view class="chest_box_item_box" :style="index == current ? 'filter: grayscale(100%);':''">
				<view class="chest_box_item_box_container"></view>
				<view class="chest_box_item_box_number">
					{{index}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	let current = ref()

	const change = (e) => {
		if(current.value == e) {
			current.value = ""
			return ;
		}
		current.value = e
	}
</script>

<style lang="scss" scoped>
	.chest {
		&_box {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 30px;
			margin: 10px;

			&_item {
				&_box {
					height: 145px;
					background: linear-gradient(to bottom, #4aa6fd, var(--color));
					border-radius: 100px;
					padding: 15px;
					position: relative;
					&_number{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: 22px;
						font-weight: bold;
						color: rgba(255,255,255,.5);
					}

					&_container {
						background: linear-gradient(to bottom, #7dbef8, #bbdeff);
						width: 100%;
						height: 100%;
						border-radius: 100px;
						position: relative;

						&::after {
							content: "";
							display: block;
							width: 12px;
							height: 12px;
							border-radius: 50%;
							background: var(--color);
							position: absolute;
							bottom: 12px;
							left: 50%;
							transform: translate(-50%);
						}

						&::before {
							content: "";
							display: block;
							width: 12px;
							height: 12px;
							border-radius: 50%;
							background: #bbdeff;
							position: absolute;
							top: 12px;
							left: 50%;
							transform: translate(-50%);
						}
					}
				}

			}
		}

	}
</style>